import React, { Component } from 'react';
import { messages } from 'share/common';
import { Button, Form, Modal, Icon } from 'antd';
import compare from 'images/expense/compare.png';
import compareEn from 'images/expense/compare-en.png'
import 'styles/request-and-expense-settings/advertisement.scss';
import { formList, actualScene } from 'containers/request-and-expense-settings/expense-setting/data-sources';
import requestAndExpenseService from 'containers/request-and-expense-settings/request-and-expense-settings.service';
import Condition from 'components/condition';
import {connect} from 'react-redux';

const { If, Else } = Condition;

@Form.create()
@connect(mapStateToProps)
class Advertisement extends Component {
  state = {
    visible: false,
    saveLoading: false
  };

  handleOpenNow = () => {
    this.setState({ visible: true });
  };

  handleOk = () => {
    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll(async (errors, values) => {
      if (!errors) {
        this.setState({ saveLoading: true });
        try {
          let currentConfig = JSON.parse(JSON.stringify(values));
          try {
            currentConfig.faPiaoPasteFreeConditions.splice(currentConfig.faPiaoPasteFreeConditions.indexOf('WEB_INVOICE_FAPIAO_NOTICKET'), 1);
          }catch (e) {}
          await requestAndExpenseService.setFreePrintPasteConfig(currentConfig);
          this.setState({ visible: false });
          this.props.close(true);
        }
        catch (e) {

        }
        this.setState({ saveLoading: false });
      }
    });
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  renderList = () => {
    const { language} = this.props;
    return actualScene.map(item => (
      <section className={item.className}>
        <section className="ad-scene-content">
          <div className="ad-scene-title">
            {item.title}
          </div>
          <p className="ad__p">{item.before}</p>
          <ul className="ad__ul">
            {item.ul.map(item => <li className="ad__li">{item}</li>)}
          </ul>
          <p className="ad__p">{item.after}</p>
        </section>
        <section className="ad-scene-img">
          <img src={language.code === 'en' ? item.imageEn : item.image} alt={item.title}/>
        </section>
      </section>
    ));
  };

  renderBack = (flag) => {
    return (
      <section className={`ad-back-${flag}`}>
        <Button ghost onClick={() => this.props.close(false)} type="link">
          <Icon type="left"/>
          <span className="ad-back__span">{messages('common.back')/*返回*/}</span>
        </Button>
      </section>
    );
  };

  render() {
    const { visible, saveLoading } = this.state;
    const { form: { getFieldDecorator, getFieldValue }, params: { isHide }, language } = this.props;
    const formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 15, offset: 1 } };
    return (
      <article>
        <section className="ad">
          {this.renderBack('gray')}
          <h1 className="ad-title">
            {messages('expense-7.key1')/*免贴票&免打印*/}
          </h1>
          <small className="ad-desc">
            {messages('expense-7.key2')/*随着国内电子发票政策的推进，电子发票的应用逐渐广泛。企业也更加注重“财务如何避免电子发票重复打印报销？\n            如何做好电子发票归档？企业如何提高员工报销效率”等问题， “无纸化报销”逐渐成为一种趋势。为此，\n            汇联易推出“费用免贴票&报销单免打印”方案，帮助企业解决电子发票报销与归档问题，提升报销效率和员工满意度，为您带来全新的报销体验。*/}
          </small>
          <br/>
          <If value={!isHide}>
            <Button
              type="primary"
              onClick={this.handleOpenNow}
              className="ad__button-fir"
            >
              {messages('expense-7.key3')/*立即开通*/}
            </Button>
          </If>
          <section className="ad-compare shadow-card">
            <img src={language.code === 'en' ? compareEn : compare} alt=""/>
          </section>
          <h1 className="ad-title ad-title-margin">
            {messages('expense-7.key4')/*实际场景案例*/}
          </h1>
          {this.renderList()}
          <If value={isHide}>
            {this.renderBack('blue')}
          </If>
        </section>
        <If value={!isHide}>
          <footer className="ad__footer">
            <Button
              type="link"
              ghost
              onClick={this.handleOpenNow}
              className="ad__footer__button"
            >
              {messages('expense-7.key3')/*立即开通*/}
            </Button>
          </footer>
        </If>

        <Modal
          onOk={this.handleOk}
          title={messages('expense-7.key5')/*免打印开通*/}
          width={800}
          visible={visible}
          keyboard
          onCancel={this.handleCancel}
          className="ad-modal"
          confirmLoading={saveLoading}
        >
          <Form>
            {
              formList.map(item => {
                  if ((['expenseReportPrintFreeConditions', 'faPiaoPasteFreeConditions'].includes(item.dataIndex) && !getFieldValue('expenseReportPrintFreeEnabled'))
                    || (item.dataIndex === 'faPiaoPasteFreeConditions' && !getFieldValue('expenseReportPrintFreeConditions')
                      .includes('INVOICE_FAPIAO_PASTE_FREE'))) {
                    return null;
                  }
                  return (
                    <Form.Item label={item.name} {...formItemLayout} extra={item.extra}>
                      {getFieldDecorator(item.dataIndex, {
                        rules: [{
                          required: !!item.required,
                          message: messages('common.select')/*请选择*/
                        }],
                        initialValue: item.initValue
                      })(React.createElement(item.component, item.params, item.child))}
                    </Form.Item>
                  );
                }
              )
            }
          </Form>
        </Modal>
      </article>
    );
  }
}

function mapStateToProps(state) {
  return {
    language: state.main.language,
  };
}
Advertisement.propTypes = {};

export default Advertisement;

